<template>
    <div class="addressList mt50">
        <van-nav-bar fixed left-arrow @click-left="$router.back()" title="地址管理">
        </van-nav-bar>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list v-model="loading" loading-text="loading..." :immediate-check="false" :finished="finished"
                finished-text="没有更多了" @load="onLoad">
                <van-address-list v-model="chosenAddressId" :list="addressList" default-tag-text="默认" @add="onAdd"
                    @edit="onEdit" />
            </van-list>
        </van-pull-refresh>
        <p image="" v-if="addressList.length === total">没有更多了</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isLoading: false,
            loading: false,
            finished: false,
            // 默认选中的地址id
            chosenAddressId: 1,
            // 地址列表
            addressList: [],
            // 页码
            page: 1,
            // 每页显示数据条数
            size: 5,
            // 数据总条数
            total: 0
        };
    },
    computed: {
        addressListCopy() {
            return this.addressList.map(item => {
                const tel = item.tel.toString().substring(0, 2) + '*****' + item.tel.toString().substring(8, 11);
                const name = item.name.substring(0, 1).padEnd(item.name.length, "*");
                return {
                    ...item,
                    tel, name
                }
            })
        }
    },
    mounted() {
        // 请求地址总数
        this.getAddressTotal();
    },
    methods: {
        onRefresh() {
            // 重置数据
            this.finished = false;
            this.addressList = [];
            this.page = 1;
            // 重新请求当前页面数据
            this.getAddressList();
        },
        onLoad() {
            setTimeout(() => {
                this.page += 1;
                this.getAddressList();
            }, 500);
        },
        getAddressList() {
            const { uid } = JSON.parse(localStorage.getItem('userLoginInfo') || '{}');
            const { page, size } = this;
            this.$axios.get('/addresslist', { params: { page, size, uid } }).then(res => {
                if (res.code === 200) {
                    const addressList = res.list.map(item => {
                        return { ...item, address: `${item.province}-${item.city}-${item.county}-${item.addressDetail}` }
                    });
                    this.addressList = [...this.addressList, ...addressList];
                    setTimeout(() => {
                        // 关闭loading效果
                        this.loading = false;
                        this.isLoading = false;
                    }, 300);
                    if (this.addressList.length >= this.total) {
                        // 所有数据都已经请求完成, 没有更多数据了
                        this.finished = true;
                    }

                }
            });
        },
        // 请求地址总数
        getAddressTotal() {
            const { uid } = JSON.parse(localStorage.getItem('userLoginInfo') || '{}');
            this.$axios.get('/addresstotal', { params: { uid } }).then(res => {
                if (res.code === 200) {
                    this.total = res.list;
                    // 请求地址列表
                    this.getAddressList();
                }
            });
        },
        onAdd() {
            // this.$toast('新增地址');
            this.$router.push('/addressAdd');
        },
        onEdit({ id }) {
            // this.$router.push({ path: '/addressAdd', query: { ...item } })
            const index = this.addressList.findIndex(item => item.id === id);
            this.$router.push({ path: '/addressAdd', query: { ...this.addressList[index] } });
        },
    },
}
</script>

<style></style>